<template>
  <scroll-view
    :style="{ height: scrollViewHeight }"
    :scroll-y="true"
    @scrolltolower="$emit('scrolltolower')"
    @refresherrefresh="$emit('refresherrefresh')"
  >
    <div class="content">
      <slot></slot>
    </div>
  </scroll-view>
</template>

<script>
import { getDeviceInfo } from '@/utils/storage'

export default {
  props: {
    /** 是否去除底部 tabbar 高度 */
    excludeTabbar: {
      type: Boolean,
      default: false,
    },
    heightToMinus: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      scrollViewHeight: '',
    }
  },
  mounted() {
    this.calcHeight()
  },
  methods: {
    /** 计算滚动区域的高度 */
    calcHeight() {
      const {
        safeAreaInsets, navbarHeight, statusBarHeight, screenHeight,
      } = getDeviceInfo()
      this.scrollViewHeight = `${
        screenHeight - navbarHeight - statusBarHeight - this.heightToMinus
      - safeAreaInsets.bottom - (this.excludeTabbar ? 60 : 0)
      }px`
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  padding-bottom: 20px;
}
</style>
